Improve this Doc View Source input[range]
- input in module ng
Native range input with validation and transformation.
In v1.5.9+, in order to avoid interfering with already existing, custom directives for input[range]
, you need to let Angular know that you want to enable its built-in support. You can do this by adding the ng-input-range
attribute to the input element. E.g.: <input type="range" ng-input-range ... />
Input elements without the ng-input-range
attibute will continue to be treated the same as in previous versions (e.g. their model value will be a string not a number and Angular will not take min
/max
/step
attributes and properties into account).
Note: From v1.6.x onwards, the support for input[range]
will be always enabled and the ng-input-range
attribute will have no effect.
This documentation page refers to elements which have the built-in support enabled; i.e. elements with the ng-input-range
attribute.
The model for the range input must always be a Number
.
IE9 and other browsers that do not support the range
type fall back to a text input without any default values for min
, max
and step
. Model binding, validation and number parsing are nevertheless supported.
Browsers that support range (latest Chrome, Safari, Firefox, Edge) treat input[range]
in a way that never allows the input to hold an invalid value. That means:
- any non-numerical value is set to
(max + min) / 2
. - any numerical value that is less than the current min val, or greater than the current max val is set to the min / max val respectively.
- additionally, the current
step
is respected, so the nearest value that satisfies a step is used.
See the HTML Spec on input[type=range]) for more info.
This has the following consequences for Angular:
Since the element value should always reflect the current model value, a range input will set the bound ngModel expression to the value that the browser has set for the input element. For example, in the following input <input type="range" ng-input-range ng-model="model.value">
, if the application sets model.value = null
, the browser will set the input to '50'
. Angular will then set the model to 50
, to prevent input and model value being out of sync.
That means the model for range will immediately be set to 50
after ngModel
has been initialized. It also means a range input can never have the required error.
This does not only affect changes to the model value, but also to the values of the min
, max
, and step
attributes. When these change in a way that will cause the browser to modify the input value, Angular will also update the model value.
Automatic value adjustment also means that a range input element can never have the required
, min
, or max
errors.
However, step
is currently only fully implemented by Firefox. Other browsers have problems when the step value changes dynamically - they do not adjust the element value correctly, but instead may set the stepMismatch
error. If that's the case, the Angular will set the step
error on the input, and set the model to undefined
.
Note that input[range]
is not compatible with ngMax
, ngMin
, and ngStep
, because they do not set the min
and max
attributes, which means that the browser won't automatically adjust the input value based on their values, and will always assume min = 0, max = 100, and step = 1.
Directive Info
- This directive executes at priority level 0.
Usage
<input type="range" ng-input-range="" ng-model="string" [name="string"] [min="string"] [max="string"] [step="string"] [ng-change="string"] [ng-checked="expression"]>
Arguments
Param | Type | Details |
---|---|---|
ngInputRange | The presense of this attribute enables the built-in support for | |
ngModel | string | Assignable angular expression to data-bind to. |
name (optional) | string | Property name of the form under which the control is published. |
min (optional) | string | Sets the |
max (optional) | string | Sets the |
step (optional) | string | Sets the |
ngChange (optional) | string | Angular expression to be executed when the ngModel value changes due to user interaction with the input element. |
ngChecked (optional) | expression | If the expression is truthy, then the |
Range Input with ngMin & ngMax attributes
© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.5.11/docs/api/ng/input/input%5Brange%5D